<template>
  <div>
    <h3>demo index</h3>
    <div>
      <TypeTable
        :columns="columns"
        :data="data"
        :query="pageSortQuery"
        :show-pagination="true"
        :row-selection="rowSelection"
        :row-class-name="rowClassName"
        expand-row-by-click
        @row-click="rowClickHandle"
      >
        <template #age="scoped">
          {{ scoped.row[ scoped.prop ] + "-slot" }}
        </template>
      </TypeTable>
    </div>
    <pacvue-radio
      v-model="radioVal"
      :label="radioVal"
      @change="radioChange"
    >Option B</pacvue-radio>
  </div>
</template>
<script>
import TypeTable from '@/components/TypeTable'
export default {
  name: 'DemoIndex',
  components: {
    TypeTable
  },
  data() {
    return {
      buttonRef: null,
      columns: [
        {
          type: 'radio'
        },
        {
          prop: 'name', // column 唯一标识符
          label: '名称', // 默认展示文字，无特殊处理则单元格默认展示此文本
          // fixed: 'left', // 左侧固定
          headerNotic: 'tip test',
          renderHeader: ({ row, prop, column }) => {
            // console.log(row, prop, column)
            return [
              <el-button type='primary' size='default' >header</el-button>
            ]
          }

        }, {
          prop: 'age', // column 唯一标识符
          label: '年龄', // 默认展示文字，无特殊处理则单元格默认展示此文本
          width: 100, // 最小宽度
          slotName: 'age',
          lineClamp: 1,
          lineClampTip: true
          // sortable: "age"
        }, {
          prop: 'height', // column 唯一标识符
          label: '身高', // 默认展示文字，无特殊处理则单元格默认展示此文本
          minWidth: 1000, // 最小宽度
          formatType: 'number',
          headerNotic: '123'
          /* format({ row, prop }) {
            return '778'
          } */
        }
      ],
      data: [
        {
          name: '小明',
          age: 16548788888888888888888888,
          height: 17554564
          /* children: [
            {
              name: '小张',
              age: 16548788888888888888888888,
              height: 17554564
            }, {
              name: '小王',
              age: 16548788888888888888888888,
              height: 17554564
            }
          ] */
        },
        {
          name: '小张',
          age: 16548788888888888888888888,
          height: 78954542
          // children: []
        }
      ],
      pageSortQuery: {
        pageNum: 1,
        pageSize: 50,
        total: 100,
        order: '',
        orderBy: ''
      },
      rowClassName: 'row-custom',
      rowSelection: {
        // checkStrictly: false,
        // selectedRowKeys: [],
        // allSelect: false,
        // rowSelectedList: [],
        // allSelectType: 'current',
        type: 'radio',
        allowCancelRadio: true,
        getCheckboxProps: (record) => {
          // console.log(record.name)
          return false
        },
        onChange(selectedRowKeys, selectedRows) {
          console.log(selectedRowKeys, selectedRows)
          // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        }

      },
      radioVal: true
    }
  },
  mounted() {

  },
  methods: {
    radioChange(event) {
      console.log('111')
    },
    rowClickHandle({ row, event }) {
      // console.log(row, event)
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
